<template>
  <div class="canvas-config flex gap-4 flex-col">
    <h1 class="text-[1.5rem] font-bold">画布配置</h1>
    <a-form-item label="主题名字" name="themeName" required>
      <a-input v-model:value="currentTheme.themeName" allowClear></a-input>
    </a-form-item>
    <a-form-item label="选择分类" name="category" required>
      <ThemeTypeOptions type="select" v-model="currentTheme.category" />
    </a-form-item>
    <a-form-item label="选择背景">
      <div
        class="flex justify-center items-center cursor-pointer background relative h-[120px]"
        :style="{
          background: `url(${currentTheme.background})`,
        }"
        @click="visible = true"
      >
        <div class="update w-[100%] absolute bottom-0 left-0 flex justify-center items-center">
          选择背景
        </div>
      </div>
    </a-form-item>
  </div>
  <FileSelector
    :type="LIBRARY_ENUM.IMAGE"
    v-model:selected="currentTheme.background"
    v-model:visible="visible"
    :sizeId="currentTheme.sizeId"
  ></FileSelector>
</template>

<script setup lang="ts">
import { LIBRARY_ENUM } from '@/enum/system';
import { currentTheme } from '../data/data';
const visible = ref(false);
</script>

<style lang="scss" scoped>
.background {
  background-position: center;
  background-size: cover !important;
  background-blend-mode: difference;
  border-radius: var(--radius);
  .update {
    background: linear-gradient(to top, #777777, transparent);
    padding: 2rem 0;
    color: white;
  }
}
</style>
